<!DOCTYPE html> 
<html> 
	<head> 
        <title>ZenTXT</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="js/jquery.mobile-1.0.1.min.css" />
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery.mobile-1.0.1.min.js"></script>

        <script>
            var file_id="";
            var rev_id="";
//            var timer_is_on=0;
            var old_content ="";

            function set_file_id(id) {
                file_id=id;
                //sessionstorage.setItem("fileid", id);
            }

            function get_file_id() {
                return file_id;
                //return sessionstorage.getItem("fileid");
            }

            function set_rev_id(id) {
                rev_id=id;
                //sessionstorage.setItem("fileid", id);
            }

            function get_rev_id() {
                return rev_id;
                //return sessionstorage.getItem("fileid");
            }

            function add_list_item(list_id, text, href, key, funcname) {
                if(text.length > 0) {
                    var ev = "onClick="+funcname+"('"+key+"');";
                    var el = "<li><a href='"+href+"'"+ev+">"+text+"</a></li>";
                    //el.page();
                    $(list_id).append(el);
                    $(list_id).listview('refresh');
                }
            }

            function load_files() {
                $("#file_list").children().remove();
                var url="/files";
                $.getJSON(url, function(data) {
                    $("#file_list").children().remove();
                    $.each(data.file, function(index, file) {
                        //console.log(file);
                        url="/file?id=" + file.key
                        add_list_item('#file_list', file.name, "#file", file.key, "set_file_id");
                    });
                });
            }

            function load_file() {
                $("#form_file_id").val(get_file_id());
                var url="/file?id=" + get_file_id();
                $.get(url, function(data) {
                    old_content = data;
                    $("#content").text(data);
                });
            }

            function add_collapsible_item(list_id, text, href, key, funcname) {
                if(text.length > 0) {
                    var ev = "onClick="+funcname+"('"+key+"');";
                    //var el = "<li><a href='"+href+"'"+ev+">"+text+"</a></li>";
                    //var data="zzz";
	                var el = "<div data-role='collapsible' data-collapsed='true' id='"+key+"'><h3>"+text+"</h3><p></p></div>";

                    //el.page();
                    $(list_id).append(el);
                    //$(list_id).collapsible-set('refresh');
                    //$(list_id).selectmenu('refresh');
                    $(list_id).trigger('create')
                }
            }

            function load_revisions() {
                $("#rev_list").children().remove();
                var url="/revisions?file=" + get_file_id();//file_id;
                //console.log(url);
                $.getJSON(url, function(data) {
                    $("#rev_list").children().remove();
                    $.each(data.revision, function(index, revision) {
                        //console.log(file);
                        url="/rev?id=" + revision.key
                        add_collapsible_item('#rev_list', revision.date, "#revision", revision.key, "set_rev_id");
                    });
                });
            }

            function load_revision(event) {
                var key=event.target.getAttribute('id');
                //console.log(key);
                var url="/rev?id=" + key;
                //console.log(url);
                //var btn = $('#rev_list');
                var $target = $(event.target);
                //if(!$target) return;
                //console.log($target);
                divobj = $target.find('p');
                //console.log(divobj);
                if(divobj.html() == "") {
                    $.get(url, function(data) {
                        divobj.html(data);
                    });
                }
            }


            $('#files').live('pageshow', function (event, data) { load_files(); });
            $('#file').live('pageshow', function (event, data) { load_file(); });
            $('#revisions').live('pageshow', function (event, data) { load_revisions(); });
            //$('#revision').live('pageshow', function (event, data) { load_revision(); });

            $('#rev_list').live('expand',function(event){load_revision(event);});

            $.ctrl = function(key, callback, args) {
                var isCtrl = false;
                $(document).keydown(function(e) {
                    if(!args) args=[]; // IE barks when args is null

                    if(e.ctrlKey) isCtrl = true;
                    if(e.keyCode == key.charCodeAt(0) && isCtrl) {
                        callback.apply(this, args);
                        return false;
                    }
                }).keyup(function(e) {
                    if(e.ctrlKey) isCtrl = false;
                });
            };

            function save_file_content() {
                //alert(get_file_id());
                //alert($("#content").text());
                var new_content = $("#content").val();
                if(old_content != new_content) {
                    //alert(new_content);
                    //console.log(new_content);
                    $.post("/save", { id: get_file_id(), content: new_content },
                       function(data) {
                         //alert("Data Loaded: " + data);
                         old_content = new_content;
                       });
                }
            }

            $.ctrl('S', function() {
                //document.forms["save"].submit();
                save_file_content();
            });

            //$( "#save" ).live( "click", function(event, ui) { save_file_content(); });

            function create_new_file() {
                var file_name = $("#file_name").val();
                //alert(file_name);
                $.post("/newfile", { name: file_name },
                   function(data) {
                        //alert("Data Loaded: " + data);
                        old_content = "";
                        set_file_id(data);
                        $('#new_file').dialog ('close');
                        //$('#file').dialog ('open');
                        window.location = "#file";
                   });
            }
            
            function on_change_page(e, data) {
                if ( typeof data.toPage === "string" ) {
                    var u = $.mobile.path.parseUrl( data.toPage ), pl = /^#file/;
                    if ( u.hash.search(pl) !== -1 ) {
                        alert(u);
                    }
                }
            }
/*
            function timedCount() {
                save_file_content();
                t=setTimeout("timedCount()",5000);
            }

            function StartTimer() {
                if (!timer_is_on) {
                    timer_is_on=1;
                    timedCount();
                }
            }
            
            function StopTimer() {
                timer_is_on=0;
            }
*/
            function load() {
//                StartTimer();

                $( "#create_new_file" ).bind( "click", function(event, ui) { create_new_file(); });
                //$(document).bind( "pagebeforechange", function(e, data) { on_change_page(e, data); });
                //$( document ).bind( "mobileinit", function() {
                    $('#file').live('pagebeforeshow',function(event, ui){
                         //console.log("pagebeforeshow: " + ui.nextPage + " : " + ui.prevPage);
//                         StartTimer();
                    });
                    $('#file').live('pagebeforehide',function(event, ui){
                         //console.log("pagebeforehide: " + ui.nextPage + " : " + ui.prevPage);
//                         StopTimer();
                         save_file_content();
                    });
                //});
            }
        </script>
    </head> 
    <body onload="load()">
        <div data-role="page" id="files" data-theme="a">
	        <div data-role="header">
		        <h1>Files</h1>
                <a href="{{ login_url }}">Login</a>
	        </div><!-- /header -->
	        <div data-role="content" data-theme="a">	
                <ul data-role="listview" data-inset="true" data-filter="true" id="file_list"></ul>
                <p><a href="#new_file" data-role="button" data-rel="dialog" data-inline="true" data-transition="pop">New file</a></p>
	        </div><!-- /content -->
	        <div data-role="footer">
		        <h4>Page Footer</h4>
	        </div><!-- /footer -->
        </div><!-- /page two -->
        <!--
        FILE PAGE
        -->
        <div data-role="page" id="file" data-theme="a">
	        <div data-role="header">
		        <h1>File</h1>
	        </div><!-- /header -->
	        <div data-role="content" data-theme="a">
                <!--form id="save" action="/save" method="post">
                    <input type="hidden" name="id" value="zzz" id="form_file_id">
                    <textarea name="content" id="content"></textarea>
                    <input type="submit" value="Save">
                </form-->
                <textarea name="content" id="content"></textarea>
                <p><a href="#revisions" data-role="button" data-inline="true">History</a></p>
                <p><a href="#main" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to main page</a></p>
	        </div><!-- /content -->
	        <div data-role="footer">
		        <h4>Page Footer</h4>
	        </div><!-- /footer -->
        </div><!-- /page two -->
        <!--
        REVISIONS PAGE
        -->
        <div data-role="page" id="revisions" data-theme="a">
	        <div data-role="header">
		        <h1>Revisions</h1>
	        </div><!-- /header -->
	        <div data-role="content" data-theme="a">	
                <div data-role="collapsible-set" id="rev_list">
	                <div data-role="collapsible" data-collapsed="false">
	                    <h3>Section 1</h3>
	                    <p>I'm the collapsible set content for section B.</p>
	                </div>
	                <div data-role="collapsible">
	                    <h3>Section 2</h3>
	                    <p>I'm the collapsible set content for section B.</p>
	                </div>
                </div>
                <p><a href="#file" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to file</a></p>
	        </div><!-- /content -->
	        <div data-role="footer">
		        <h4>Page Footer</h4>
	        </div><!-- /footer -->
        </div><!-- /page two -->
        <!--
        REVISION PAGE
        -->
        <div data-role="page" id="revision" data-theme="a">
	        <div data-role="header">
		        <h1>Revision</h1>
	        </div><!-- /header -->
	        <div data-role="content" data-theme="a">
                <p id="rev_content"></p>
                <p><a href="#revisions" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to revisions</a></p>
	        </div><!-- /content -->
	        <div data-role="footer">
		        <h4>Page Footer</h4>
	        </div><!-- /footer -->
        </div><!-- /page two -->
        <!--
        NEW FILE PAGE
        -->
        <div data-role="page" id="new_file">
            <div data-role="header" data-theme="a">
	            <h1>New file</h1>
            </div><!-- /header -->
            <div data-role="content" data-theme="a">	
	            <h2>Name</h2>
                <!--form id="newfile" action="/newfile" method="post">
                    <input type="text" name="name" id="name" data-mini="true" />
                    <input type="submit" value="Create">
                </form-->
                <input type="text" name="name" id="file_name" data-mini="true" />
                <p><a id="create_new_file" data-role="button">Create</a></p>
            </div><!-- /content -->
            <div data-role="footer">
	            <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page popup -->
        <!--
        POPUP PAGE
        -->
        <div data-role="page" id="popup">
        </div><!-- /page popup -->
    </body>
</html>

